<!--模板集合-->
<template>
  <div>
    <ZTitle title="模板导航" />
    <div class="temps_list">
      <div class="temp_item" @mouseover="autoplay(0)" @mouseout="notplay(0)">
        <div class="item">
          <div class="lt">
            <Item :isplay="isplay[0]" />
          </div>
          <div class="rt">
            <h5>后台管理系统</h5>
            <div class="group">
              <span class="lb">类型：</span>
              <div class="ls">
                <el-tag type="success">内容管理系统</el-tag>
                <el-tag type="success">商城管理系统</el-tag>
                <el-tag type="success">客户关系管理系统</el-tag>
                <el-tag type="success">OA系统</el-tag>
                <el-tag type="success">财务管理系统</el-tag>
                <el-tag type="success">特殊定制</el-tag>

              </div>
            </div>
            <el-badge :value="12" class="badge" type="primary">
              <el-button size="mini" type="primary" plain>查看</el-button>
            </el-badge>
          </div>
        </div>
      </div>
      <div class="temp_item" @mouseover="autoplay(1)" @mouseout="notplay(1)">
        <div class="item">
          <div class="lt">
            <Item :isplay="isplay[1]" />
          </div>
          <div class="rt">
            <h5>门户网站</h5>
            <div class="group">
              <span class="lb">类型：</span>
              <div class="ls">
                <el-tag type="success">博客</el-tag>
                <el-tag type="success">新闻客户端</el-tag>
                <el-tag type="success">网站导航</el-tag>
                <el-tag type="success">个人网站</el-tag>
                <el-tag type="success">旅游网站</el-tag>
                <el-tag type="success">特殊定制</el-tag>

              </div>
            </div>
            <el-badge :value="12" class="badge" type="primary">
              <el-button size="mini" type="primary" plain>查看</el-button>
            </el-badge>
          </div>
        </div>
      </div>
      <div class="temp_item" @mouseover="autoplay(2)" @mouseout="notplay(2)">
        <div class="item">
          <div class="lt">
            <Item :isplay="isplay[2]" />
          </div>
          <div class="rt">
            <h5>移动端</h5>
            <div class="group">
              <span class="lb">类型：</span>
              <div class="ls">
                <el-tag type="success">微信小程序</el-tag>
                <el-tag type="success">广告宣传页</el-tag>
                <el-tag type="success">公众号</el-tag>
                <el-tag type="success">特殊定制</el-tag>

              </div>
            </div>
            <el-badge :value="12" class="badge" type="primary">
              <el-button size="mini" type="primary" plain>查看</el-button>
            </el-badge>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import ZTitle from "../zTitle/index";
import Item from "./tempItem";

export default {
  components: {
    Item,
  },
  data() {
    return {
      isplay: [false, false, false],
      index: 0,
    };
  },
  methods: {
    autoplay(index) {
      console.log(index);
      this.isplay.splice(index, 1, true);
      this.index = index;
    },
    notplay(index) {
      this.isplay.splice(index, 1, false);
      this.index = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.temps_list {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 33.33%;
  .temp_item {
    width: 600px;
    margin-bottom: 15px;
    height: 220px;
    &:nth-child(odd) {
      padding-left: 5px;
      padding-right: 10px;
    }
    &:nth-child(even) {
      padding-right: 5px;
      padding-left: 10px;
    }

    .item {
      display: flex;
      flex-direction: row;
      background-color: #fff;
      height: 220px;
      overflow: hidden;
      box-shadow: 0px 0px 0px 0px #fff;
      transform: skew(0deg, 0deg);
      transition: all 500ms ease-in-out;
      &:hover {
        transform: skew(5deg, 0deg);
        box-shadow: 0px 0px 15px 5px #999;
      }
    }
    .lt {
      width: 200px;
      overflow: hidden;
    }
    .rt {
      flex: 1;
      padding: 5px 12px;
      h5 {
        font-size: 16px;
        line-height: 32px;
      }
      .group {
        margin: 5px 0;
        font-size: 14px;
        color: #666;
        .lb {
          float: left;
        }
        .ls {
          padding-left: 50px;
          .el-tag {
            margin-bottom: 6px;
          }
        }
      }
      .badge {
        margin-top: 10px;
        margin-left: 50px;
      }
    }
  }
}
</style>